<template>
  <div
    class="chat-box"
    :class="{
      'mine-chat-box': isMine
    }"
  >
    <template v-if="!isMine">
      <div class="w-[38px] h-[38px] mt-[5px]">
        <img class="w-[38px] h-[38px] bg-[#ddd] rounded-[38px]" :src="netAvatar(item.Avatar)" />
      </div>
    </template>
    <div
      class="flex-1 w-0"
      :class="{
        'mr-[50px] ml-[10px]': !isMine,
        'mr-[10px] ml-[50px]': isMine
      }"
    >
      <div
        :class="{
          'flex justify-end': isMine
        }"
      >
        <div class="chat-name">
          {{ item.NickName }}
        </div>
      </div>
      <div
        :class="{
          'flex justify-end': isMine
        }"
      >
        <template v-if="item.MsgType == SocketMsgType.kefu_text_msg">
          <div class="chat-message" v-html="formatContent(item.Msg)"></div>
        </template>
        <template v-if="item.MsgType == SocketMsgType.img_msg">
          <div class="chat-message">
            <div class="bg-[#f5f7fa] flex justify-center w-[220px] h-[144px]">
              <van-image
                width="100%"
                height="100%"
                fit="contain"
                :src="netPath(item.Msg)"
                @click="handlePreview(netPath(item.Msg))"
              />
            </div>
          </div>
        </template>
      </div>
    </div>
    <template v-if="isMine">
      <div class="w-[38px] h-[38px] mt-[5px]">
        <img class="w-[38px] h-[38px] bg-[#ddd] rounded-[38px]" :src="netAvatar(item.Avatar)" />
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import { SocketMsgType } from "@/enums";
import { useUserStore } from "@/store/modules/user";
import { netPath, netAvatar } from "@/utils/common";
import { storeToRefs } from "pinia";
import { showImagePreview } from "vant";

const props = withDefaults(
  defineProps<{
    item: ChatHistoryMo;
  }>(),
  {}
);

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
// 是否为自己
const isMine = computed(() => {
  if (props.item.UserId === `r_${userInfo.value?.RoomId}`) {
    return true;
  }
  return false;
});

// 标签转义
function html2Escape(sHtml: string) {
  var temp: any = document.createElement("div");
  temp.textContent != null ? (temp.textContent = sHtml) : (temp.innerText = sHtml);
  var output = temp.innerHTML;
  temp = null;
  return output;
}

// 处理消息体
const formatContent = (content: string) => {
  let html = html2Escape(content);
  return html.replace(/\n/g, "<br />");
};

// 图片预览
const handlePreview = (content: string) => {
  showImagePreview([content]);
};
</script>
<style lang="scss" scoped>
.chat-box {
  margin: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
  &:first-child {
    margin-top: 10px;
  }
}
.mine-chat-box {
  .chat-name {
    color: #666;
    background-color: transparent;
  }
  .chat-message {
    background-color: #95eb69;
    &::after {
      content: "";
      position: absolute;
      width: 0px;
      height: 0px;
      right: -13px;
      left: auto;
      top: 10px;
      border: 7px solid transparent;
      border-left: 7px solid #95eb69;
    }
  }
}
.chat-message {
  &::after {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    left: -13px;
    top: 10px;
    border: 7px solid transparent;
    border-right: 7px solid #fff;
  }
}
</style>
<style lang="css" scoped>
.chat-name {
  @apply h-[18px] leading-[18px] px-[5px] rounded-[4px] bg-[#4fa3f7] inline-block text-[12px] text-[#fff] mb-[4px];
}
.chat-message {
  @apply bg-[#fff] break-all inline-block p-[10px] mb-[10px] rounded-[6px] relative text-[14px] min-w-[40px];
}
</style>
